import React from 'react';
import {
  Menu, Dropdown, Tree, Form, Row, Col, Input, Button, Modal, Icon, DatePicker, Select, Table, Tag, message
} from 'antd';
import { connect } from 'dva';
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import VideoButton from './VideoButton';
import AddModal from './AddModal';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import { getVideoList, deleteVideo, getTypeList, sortType, upDownVideo, auditVideo, sortTable, loginUser } from '../../../services/fetch';
import { sortInformation, changeStatus } from '../../../services/theme'
import './Theme.scss';
import CommentModal from '../Comment/CommentModal';
import { UrlConfig } from '../../../services/fetch';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { confirm } = Modal;
let themeId = 0;
@connect(({ theme,video }) => ({
  theme,video
}))
@Form.create()
class ThemeDetail extends React.PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      isTable: true,
      loading: false,
      Ylvisible: false,
      selectedKeys: []
    }
  }

  componentDidMount() {
    this.init()

    //通过监听storage  实现跨页面通信，当保存和编辑时，更新列表页
    window.addEventListener('storage', (e) => {
      if (e.key == 'themeSubmit') {
        // console.log(localStorage.getItem('localSelectedThemeId'),'theme_id');
        this.props.dispatch({
          type: 'theme/getTableList', payload: {
            dataAugment: {
              index:1,
              theme_id:localStorage.getItem('localSelectedThemeId') ? localStorage.getItem('localSelectedThemeId') : this.props.theme.dataAugment.theme_id
            }
          }
        })
        // this.props.dispatch({
        //   type: 'theme/getTableList', payload: {
        //     dataAugment: this.props.theme.dataAugment
        //   }
        // })


      }
    });
  }

  init = () => {
    themeId = this.props.match.params.id;
    let data = {
      index: 1,
      page_size: 10,
      theme_id: this.props.match.params.id
    }
    this.props.dispatch({
      type: 'theme/getTableList', payload: {
        dataAugment: data
      }
    })
    this.props.dispatch({
      type: 'theme/setParams', data: this.props.match.params
    })
      //分页初始化为第一页
    this.props.dispatch({ type: 'theme/updateIndex', data: 1 })
      //清除已选中的列
      this.props.dispatch({ type: 'theme/updateMoreDeal', data: [] });
    // //获取分类
    // this.props.dispatch({ type: 'theme/classList' })
    // //获取tree list
    // this.props.dispatch({
    //   type: 'theme/getTreeList', callback: (res) => {
    //     //获取table list
    //     let plate_id, selectedKeys;

    //     if (res[0].children) {
    //       plate_id = res[0].children[0].plate_id;
    //       selectedKeys = [res[0].children[0].key];
    //     } else {
    //       plate_id = res[0].plate_id;
    //       selectedKeys = ['0'];
    //     }
    //     let data = {
    //       index: this.props.theme.index,
    //       plate_id: plate_id
    //     }
    //     this.props.dispatch({
    //       type: 'theme/updateTableName', payload: {
    //         initTableName: plate_id,
    //         selectedKeys: selectedKeys
    //       }
    //     });
    //     this.props.dispatch({
    //       type: 'theme/getTableList', payload: {
    //         dataAugment: data
    //       }
    //     })
    //   }
    // });
  }


  onSelect = (selectedKeys, info) => {
  }
  onChangeSwitch = (e) => {
    this.setState({
      isTable: true
    })
  }
  onChangeSwitchs = () => {
    this.setState({
      isTable: false
    })
  }

  hideCallback = (t) => {
    this.child = t;
  }

  handleOk = () => {
    const { dispatch } = this.props;

    dispatch({
      type: 'theme/hideModal'
    })
  }

  handleCancel = () => {
    const { dispatch } = this.props;
    this.child.handleCancel();
    dispatch({
      type: 'theme/hideModal'
    })
  }

  render() {
    return (
      <section id='theme' style={{ width: '100%', height: '100%', overflow: 'auto' }}>

        <header>
          专题资讯管理
                </header>
        <div className='content'>
          {/* <div className='leftTree'>
            <h4>版面管理</h4>
            <TreeLeft />
          </div> */}
          <div className='rightContent'>
            <WrappedAdvancedSearchForm />
            {/* <div style={{ position: 'absolute', top: '90px', right: '30px', fontSize: '25px', cursor: 'pointer' }}>
              <Icon type="table" theme="outlined" onClick={this.onChangeSwitch} style={this.state.isTable ? { marginRight: 5, fontSize: '30px' } : { marginRight: 5 }} />
              <Icon type="appstore" theme="outlined" onClick={this.onChangeSwitchs} style={this.state.isTable ? {} : { fontSize: '30px' }} />
            </div> */}
            {/* {this.state.isTable ? <TableList /> : <CardList />} */}
            <TableList />
          </div>
        </div>
        <Modal
          title="新建"
          width={800}
          visible={this.props.theme.isShowModal}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}
        >
          <AddModal callback={this.hideCallback} />
        </Modal>
      </section>
    )
  }
}

export default ThemeDetail;

/**
 * 搜索组件
 */
@connect(({ theme }) => ({
  theme,
}))
class AdvancedSearchForm extends React.PureComponent {
  state = {
    expand: false,
  };
  /**
   * 搜索
   */
  handleSearch = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let data = {
        index: this.props.theme.index,
        page_size: 10,
        theme_id: this.props.theme.initTableName,
        status: values.status ? values.status : '',
        state: values.state ? values.state : '',
        class_id: values.class_id ? values.class_id : '',
        key: values.key ? values.key : '',
        start: values.time ? values.time[0] ? values.time[0].format('YYYY-MM-DD') + ' 00:00:00' : '' : '',
        end: values.time ? values.time[1] ? values.time[1].format('YYYY-MM-DD') + ' 23:59:59' : '' : ''
      }
      this.props.dispatch({
        type: 'theme/getTableList', payload: {
          dataAugment: data
        }
      })
    });
  }
  /**
   * 清除
   */
  handleReset = () => {
    this.props.form.resetFields();
    let data = {
      index: this.props.theme.index,
      theme_id: this.props.theme.initTableName
    }
    this.props.dispatch({
      type: 'theme/getTableList', payload: {
        dataAugment: data
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form
        className="ant-advanced-search-form"
        onSubmit={this.handleSearch}
      >
        <Row gutter={24}>
          <Col span={6} >
            <FormItem label='时间'>
              {getFieldDecorator('time')(
                <RangePicker />
              )}
            </FormItem>
          </Col>
          <Col span={5} >
            <FormItem label='关键字搜索'>
              {getFieldDecorator('key')(
                <Input />
              )}
            </FormItem>
          </Col>
          <Col span={3} >
            <FormItem label='状态'>
              {getFieldDecorator('status')(
                <Select >
                  <Option value="0">草稿</Option>
                  <Option value="1">待审</Option>
                  <Option value="2">审核通过</Option>
                  <Option value="3">审核退回</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          {/* <Col span={3} >
            <FormItem label='上下架'>
              {getFieldDecorator('state')(
                <Select >
                  <Option value="0">下架</Option>
                  <Option value="1">上架</Option>
                </Select>
              )}
            </FormItem>
          </Col> */}
          {/* <Col span={3} >
            <FormItem label='分类'>
              {getFieldDecorator('class_id')(
                <Select >
                  {
                    this.props.theme.classList.map((item, index) => {
                      return <Option key={index} value={item.class_id}>{item.class_name}</Option>
                    })
                  }
                </Select>
              )}
            </FormItem>
          </Col> */}

          <Col span={4} style={{}}>
            <Button type="primary" htmlType="submit">搜索</Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              清除
              </Button>
          </Col>
        </Row>
      </Form>
    );
  }
}

const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);




/**
 * 树形组件
 */
@connect(({ theme }) => ({
  theme,
}))
class TreeLeft extends React.PureComponent {
  state = {
    selectedKeys: [],
  };
  onDrop = (info) => {
    const dropKey = info.node.props.eventKey;
    const dragKey = info.dragNode.props.eventKey;
    const dropPos = info.node.props.pos.split('-');
    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
    const loop = (data, key, callback) => {
      data.forEach((item, index, arr) => {
        if (item.key === key) {
          return callback(item, index, arr);
        }
        if (item.children) {
          return loop(item.children, key, callback);
        }
      });
    };
    let data = [...this.props.theme.treeList]

    let dragObj;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (info.dropToGap) {
      let ar;
      let i;
      loop(data, dropKey, (item, index, arr) => {
        ar = arr;
        i = index;
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
    } else {
      loop(data, dropKey, (item) => {
        item.children = item.children || [];
        // where to insert 示例添加到尾部，可以是随意位置
        item.children.push(dragObj);
      });
    }
    this.props.dispatch({
      type: 'theme/backTreeList', payload: {
        dataAugment: data
      }
    });
  }
  /**
   * plate_id  修改
   * table list  数据变换
   */
  changeTableName = (selectedKeys, e) => {
    localStorage.setItem('treeSelectedKeys', selectedKeys)
    if (selectedKeys.length == 0) {
      return false;
    }
    let keys = selectedKeys.length > 0 ? selectedKeys : ['0']
    let keyArr = keys[0].split('-')
    let data = this.props.theme.treeList
    let plate_id = ''
    if (keyArr.length === 1) {  //父类
      this.props.dispatch({
        type: 'theme/updateTableName', payload: {
          initTableName: e.selectedNodes[0].props.plate_id,
          selectedKeys: selectedKeys
        }
      });
      plate_id = e.selectedNodes[0].props.plate_id
    }
    if (keyArr.length === 2) {   //子类
      this.props.dispatch({
        type: 'theme/updateTableName', payload: {
          initTableName: data[Number(keyArr[0])].children[Number(keyArr[1])].plate_id,
          selectedKeys: selectedKeys
        }
      });
      plate_id = data[Number(keyArr[0])].children[Number(keyArr[1])].plate_id
    }
    let datas = {
      index: this.props.theme.index,
      plate_id: plate_id
    }
    this.props.dispatch({
      type: 'theme/getTableList', payload: {
        dataAugment: datas
      }
    })

  }
  // /**
  //  * 返回数据处理
  //  */
  // changeData=(treeListData)=>{
  //   const data = []
  //   treeListData.map((item, index) => {
  //     let obj = {
  //       key: String(index),
  //       plate_id: item.plate_id,
  //       title: item.plate_name,
  //       plate_id: item.plate_id,
  //       children: item.children ? item.children : ''
  //     }
  //     if (item.children) {
  //       item.children.map((i, ins) => {
  //         let obj2 = {
  //           key: String(index) + '-' + ins,
  //           plate_id: i.plate_id,
  //           title: i.plate_name,
  //           plate_id: i.plate_id
  //         }
  //         item.children[ins] = obj2
  //       })
  //     }
  //     data[index] = obj
  //   })
  //   return data
  // }
  render() {
    const treeList = [...this.props.theme.treeList]
    const loop = datas => datas.map((item) => {
      if (item.children && item.children.length) {
        return <TreeNode key={item.key} title={item.title} plate_id={item.plate_id} disabled={true}>{loop(item.children)}</TreeNode>;
      }
      return <TreeNode key={item.key} title={item.title} plate_id={item.plate_id} />;
    });

    // const expandedKeys = [];
    // treeList.map((item,k)=>{
    //   expandedKeys.push(item.key)
    // })

    return (
      <Tree
        className="draggable-tree"
        defaultSelectedKeys={['0']}
        autoExpandParent={true}
        selectedKeys={this.props.theme.selectedKeys}
        defaultExpandParent={true}
        defaultExpandAll={true}
        draggable
        showLine
        onDragEnter={this.onDragEnter}
        onDrop={this.onDrop}
        onSelect={this.changeTableName}
      >
        {loop(treeList)}
      </Tree>
    );
  }
}


/**
 * 表单
 */
class BodyRow extends React.PureComponent {

  dragDirection = (
    dragIndex,
    hoverIndex,
    initialClientOffset,
    clientOffset,
    sourceClientOffset,
  ) => {
    const hoverMiddleY = (initialClientOffset.y - sourceClientOffset.y) / 2;
    const hoverClientY = clientOffset.y - sourceClientOffset.y;
    if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
      return 'downward';
    }
    if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
      return 'upward';
    }
  }



  render() {
    const {
      isOver,
      connectDragSource,
      connectDropTarget,
      moveRow,
      dragRow,
      clientOffset,
      sourceClientOffset,
      initialClientOffset,
      ...restProps
    } = this.props;
    const style = { ...restProps.style, cursor: 'move' };

    let className = restProps.className;
    if (isOver && initialClientOffset) {
      const direction = this.dragDirection(
        dragRow.index,
        restProps.index,
        initialClientOffset,
        clientOffset,
        sourceClientOffset
      );
      if (direction === 'downward') {
        className += ' drop-over-downward';
      }
      if (direction === 'upward') {
        className += ' drop-over-upward';
      }
    }

    return connectDragSource(
      connectDropTarget(
        <tr
          {...restProps}
          className={className}
          style={style}
        />
      )
    );
  }
}

const rowSource = {
  beginDrag(props) {
    return {
      index: props.index,
    };
  },
};

const rowTarget = {
  drop(props, monitor) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Time to actually perform the action
    props.moveRow(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  },
};

const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  sourceClientOffset: monitor.getSourceClientOffset(),
}))(
  DragSource('row', rowSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    dragRow: monitor.getItem(),
    clientOffset: monitor.getClientOffset(),
    initialClientOffset: monitor.getInitialClientOffset(),
  }))(BodyRow)
);

/**
 * table 表
 */
@connect(({ theme, video }) => ({
  theme, video
}))
class DragSortingTable extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      Ylvisible: false
    }
  }
  components = {
    body: {
      row: DragableBodyRow,
    },
  }
  /**
   * table 拖拽排序
   */
  moveRow = (dragIndex, hoverIndex) => {
    let dataSourceTable = this.props.theme.dataSource.list
    if (dataSourceTable[dragIndex].top === dataSourceTable[hoverIndex].top) {

      const { dataSource } = this.props.theme;
      const data = dataSource.list
      const dragRow = data[dragIndex];
      const newData = update(data, {
        $splice: [[dragIndex, 1], [hoverIndex, 0, dragRow]],
      })
      let before_sort = '';
      let before_information_id = 0;
      let after_information_id = 0;
      dataSource.list = newData
      newData.map((item, index) => {
        if (item.information_id === dragRow.information_id) {
          if (newData[index + 1]) {
            before_sort = newData[index + 1].sort;
            before_information_id = newData[index + 1].information_id;
          } else {
            before_sort = newData[index - 1].sort - 1;
            after_information_id = newData[index - 1].information_id;
          }
        }
      })

      let dataAugment = {
        theme_id: this.props.theme.initTableName,
        information_sorts: [{
          information_id: dragRow.information_id,
          sort: dragRow.sort
        }],
        before_sort: before_sort,
        before_information_id: before_information_id,
        after_information_id: after_information_id,
      }
      let dataAug = {
        index: this.props.theme.index,
        theme_id: this.props.theme.initTableName
      }

      sortInformation(dataAugment).then((res) => {
        if (res.data.code === 200) {
          this.props.dispatch({ type: 'theme/getTableList', payload: { dataAugment: dataAug } });
        }
      })

    } else {
      message.error('不能和置顶元素排序')
    }
  }
  /**
   * 批量处理 审批 删除 上下架
   */
  onSelectChange = (selectedRowKeys, data) => {
    let ids = [];
    data.forEach((item) => {
      ids.push(item.information_id)
    })
    this.props.dispatch({
      type: 'theme/setSelectedPlateIds',
      data: {
        ids: ids,
        list: data
      }
    })
    this.props.dispatch({ type: 'theme/updateMoreDeal', data: selectedRowKeys });
  }
  /**
   * 单个 删除 资讯列表数据
   */
  delete = (record) => {
    var _that = this;
    confirm({
      title: '确认删除资讯吗',
      content: '删除的资讯标题：'+record.title,
      onOk() {
        let data = {
          information_ids: [record.information_id],
          plate_id: _that.props.theme.initTableName
        }
        let datas = _that.props.theme.dataSource
        datas.list.map((item, index) => {
          if (item.information_id === record.information_id) {
            datas.list.splice(index, 1)
          }
        })
        datas.total -= 1
        _that.props.dispatch({
          type: 'theme/deleteTableList', payload: {
            dataAugment: data,
            dataSource: datas
          }
        });
      }
    })


  }
  /**
   * 上架  下架
   * record 返回当前 数据
   */
  upVideo = (record) => {
    let data = {
      information_ids: [record.information_id],
      state: record.state === 0 ? 1 : 0
    }
    setTimeout(() => {

    }, 3000)
    this.upDownVideoFetch(data)
  }
  //封装 上下架 请求
  upDownVideoFetch = (data) => {
    upDownVideo(data).then((res) => {
      if (res.data.code === 200) {
        let list = this.props.theme.dataSource
        list.list.map((item, index) => {
          data.information_ids.map((i, ins) => {
            if (item.information_id === i) {
              item.state = item.state === 0 ? 1 : 0
            }
          })
        })
        this.props.dispatch({ type: 'theme/updateTableList', data: list });
      }
      message.success(res.data.msg);
    })
  }
  /**
   * 审核 状态处理 审核通过
   * 审核: 0:编辑状态 1:待审状态 2:终审通过 3:退回待编
   */
  //审核通过
  auditVideoFun = (record) => {
    let data = {
      information_ids: [record.information_id],
      status: 2,
    }
    this.auditVideoHandle(data, 2)
  }
  //审核拒绝
  auditVideoBack = (record) => {
    let data = {
      information_ids: [record.information_id],
      status: 3
    }
    this.auditVideoHandle(data, 3)
  }
  //提交审核
  submitAduit = (record) => {
    let data = {
      information_ids: [record.information_id],
      status: 1
    }
    this.auditVideoHandle(data, 1)
  }
  //审核处理请求封装
  auditVideoHandle = (data, num) => {
    changeStatus(data).then((res) => {
      if (res.data.code === 200) {
        let list = this.props.theme.dataSource
        list.list.map((item, index) => {
          data.information_ids.map((i, ins) => {
            if (item.information_id === i) {
              item.status = num
            }
          })
        })
        this.props.dispatch({ type: 'theme/updateTableList', data: list });
        message.success(res.data.msg);
      } else {
        message.error(res.data.msg);
      }
    })
  }
  /**
   * 复制  table 一条数据
   */
  copyVideoList = (record) => {

    let url;
    if (window.location.origin.indexOf('localhost') > -1) {
      url = window.location.origin + window.location.search + '#/AddTheme/' + this.props.theme.params.id + '/theme_copy';
    } else {
      url = window.location.origin + '/application/fcinformation/web/' + window.location.search + '#/AddTheme/' + this.props.theme.params.id + '/theme_copy';
    }

    window.open(url);
  }
  showModal = (record) => {
    console.log(record,'showModal');
    if (record.module_name === 'fcvideo') {

      this.props.dispatch({
        type: 'theme/getInformationInfo', data: {
          data: record
        }
      });
      this.props.dispatch({ type: 'video/getVideoInfo', data: { video_id: record.used_id } });

    } else if (record.module_name === 'fcinformation_theme') {
      // this.props.dispatch({ type: 'video/getThemeinformation', data: {information_id:  record.used_id} });
    } else if (record.module_name === 'fcinformation') {
      this.props.dispatch({
        type: 'theme/getUseInformationInfo', data: {
          information_id: record.used_id
        }
      });
    } else{
      this.props.dispatch({
        type: 'theme/getInformationInfo', data: {
          data: record
        }
      });
    }

    this.setState({
      Ylvisible: true,
      allData: record
    });
  }

  handleOk = (e) => {
    this.setState({
      visible: false,
    });
  }

  handleCancel = (e) => {
    this.setState({
      visible: false,
      Ylvisible: false
    });
  }

  edit = (data) => {
    let url;
    if (window.location.origin.indexOf('localhost') > -1) {
      url = window.location.origin + window.location.search + '#/AddTheme/theme_edit/' + data.information_id;
    } else {
      url = window.location.origin + '/application/fcinformation/web/' + window.location.search + '#/AddTheme/theme_edit/' + data.information_id;
    }
    window.open(url);

  }
  /**
   * 置顶
   */
  upToTop = (record) => {
    this.props.dispatch({
      type: 'theme/top', data: {
        information_id: record.information_id,
        sort: record.sort
      }
    });
  }
  /**
   * 取消置顶
   */
  downTop = (record) => {
    this.props.dispatch({
      type: 'theme/cancelTop', data: {
        information_id: record.information_id,
        sort: record.sort
      }
    });
  }
  //处理详情数据
  showMoreDital = (data) => {
    console.log(data,'showMoreDital');
    console.log(this.state.allData,'this.state.allData');
    console.log(this.props.video,'this.props.video.')
    if (data) {
      switch (data.type) {
        case 0:
          if (data.module_name === 'fcvideo') {  //视频

            return <div>
                      <h3>标题：{data.information_title}</h3>
                      <video src={this.props.video.videoInfo?this.props.video.videoInfo.video_src:''}
                      controls="controls" width="100%">
                      </video>
                  </div>
          }
          if(data.module_name === 'fcinformation_theme'){ //专题

            return <div>
                        <iframe width="100%" height="600px" src={UrlConfig+'/application/fcinformation/mobile/#/List/'+data.used_id+'/undefined?isZixunDetail=1'}></iframe>
                    </div>
          }
          if (data.module_name === 'fcinformation') {  //资讯
            return <div>
              <iframe width="100%" height="600px" src={UrlConfig + '/application/fcinformation/mobile/#/Detail/' + data.information_id + '/undefined?isZixunDetail=1&isPreviewDetail=1'}></iframe>
            </div>
          }

          return <div>
            <h3>标题：{data.information_title}</h3>
            <div className="showDitalDiv">
              <img src={data.information_img} alt="..." width='100%' height='300px' />
              <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p>
            </div>
          </div>
          break;
        case 1:
        if(this.state.allData.module_name == 'fcinformation'){
          return <div>
                <iframe width="100%" height="600px" src={UrlConfig+'/application/fcinformation/mobile/#/ArticleDetail/'+data.information_id+'/undefined?isZixunDetail=1&isPreviewDetail=1'}></iframe>
            </div>
        }else{
          return <div>
              <iframe width="100%" height="600px" src={UrlConfig+'/application/fcinformation/mobile/#/Detail/'+data.information_id+'/undefined?isZixunDetail=1&isPreviewDetail=1'}></iframe>
          </div>
        }

          break;
        case 2:
          console.log(data)
          return <div style={{ height: '600px', overflowY: 'auto' }}>
            <h3>标题：{data.information_title}</h3>
            <div className="showDitalDiv">
              <img src={data.information_img} alt="..." width='100%' height='300px' />
              <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p>
            </div>
            {
              data.img_arr.map((item, index) => {
                return (
                  <div className="showDitalDiv" key={index}>
                    <img src={item.img_path} alt="..." width='100%' height='300px' />
                    <div className="showDitalP">
                      <h3>{item.img_title}</h3>
                      <p>{item.img_intro}</p>
                    </div>
                  </div>
                )
              })
            }
            <h3>更多推荐：</h3>
            <div className="showMoreDital">
              <div className="showDitalDiv">
                <img src={data.information_img} alt="..." width='100%' height='250px' />
                <p className="showDitalP">{data.intro}</p>
              </div>
              <div className="showDitalDiv">
                <img src={data.information_img} alt="..." width='100%' height='250px' />
                <p className="showDitalP">{data.intro}</p>
              </div>
            </div>
          </div>
          break;
        case 3:
          return <div>
            <div className="showDitalDiv">
              <img src={data.information_img} alt="..." width='100%' height='300px' />
              <div className="showDitalP">
                <h3>{data.information_title}</h3>
                <p>{data.intro}</p>
              </div>
            </div>
            <p style={{ fontSize: '15px', padding: '5px 14px', border: '1px solid #bfbfbf', borderRadius: '7px' }}>
              关联：{data.url ? data.url : (this.backName(data.banner_module_name) + '-' + data.banner_used_title)}</p>
          </div>
          break;
        default:
          break;
      }
    }
  }
  render() {
    const { dataSource } = this.props.theme
    const videoData = dataSource.list ? dataSource.list : []
    const total = dataSource.total ? dataSource.total : ''
    const selectedRowKeys = this.props.theme.selectedRowKeys;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const changeTag = (data) => {
      console.log(data);
      switch (data.module_name) {
        case 'fcvideo':
          return '视频'
          break;
        case 'fcfind':
          return '发现';
          break;
        case 'fcinformation':
          let a = '资讯';
          if (data.type == 1) {
            a = '图文';
          } else if (data.type == 2) {
            a = '图集'
          }
          return a;
          break;
        case 'fcinformation_theme':
          return '专题';
          break;
      }
    }
    const columns = [{
      className: 'h_table_td',
      render: (text, record, index) => {
        return (
          <div className="h_table_div" key={index}>
            {record.module_name ? <Tag color="blue" >引用</Tag> : ''}
            {record.type ? <Tag color="green" >{record.type === 1 ? '文章' : record.type === 2 ? '图集' : 'banner'}</Tag> :
              record.module_name ? <Tag color="green" >{changeTag(record)}</Tag> : ''}
            {record.top === 1 ? <Tag color="red" >置顶</Tag> : ''}
          </div>
        )
      },
    },
    {
      title: '标题',
      dataIndex: 'information_title',
      key: 'information_title',
      width: 220,
    },
    {
      title: '创建人',
      dataIndex: 'create_user',
      key: 'create_user',
      width: 100,
    },
    // {
    //   title: '点击量',
    //   dataIndex: 'scan_num',
    //   key: 'scan_num',
    //   width: 100,
    //   // render: (text, data) => {
    //   //   return parseInt(text) + parseInt(data.default_scan_num);
    //   // }
    // }, {
    //   title: '评论量',
    //   dataIndex: 'comment_num',
    //   key: 'comment_num',
    //   width: 100,
    // }, {
    //   title: '点赞量',
    //   dataIndex: 'thumbs_up_num',
    //   key: 'thumbs_up_num',
    //   width: 100,
    //   // render: (text, data) => {
    //   //   return parseInt(text) + parseInt(data.default_thumbs_up_num);
    //   // }
    // }, {
    //   title: '转发量',
    //   dataIndex: 'forward_num',
    //   key: 'forward_num',
    //   width: 100,
    //   // render: (text, data) => {
    //   //   return parseInt(text) + parseInt(data.default_forward_num);
    //   // }
    // }, 
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      width: 100,
      render: (status, a) => {
        if (status === 0) {
          return <span style={{ color: '#f44336' }}>草稿</span>
        }
        if (status === 1) {
          return <span style={{ color: '#607d8b' }}>待审</span>
        }
        if (status === 2) {
          return <span style={{ color: '#4caf50' }}>审核通过</span>
        }
        if (status === 3) {
          return <span style={{ color: '#673ab7' }}>审核退回</span>
        }
        // if (status === 2 && a.state == 1) {
        //   return <span style={{ color: '#4caf50' }}>已上架</span>
        // }
      }
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      width: 200,
    },
    {
      title: '操作',
      width: 200,
      render: (text, record, index) => {
        const quanxian = this.props.theme.quanxian;

        return (
          <div>
            <span className="bule" onClick={() => this.showModal(record)} style={{ marginRight: '15px' }}>预览</span>

            {/* {
              record.state === 1 ?
                <span className="bule" style={{ marginRight: '15px', color: '#999' }} onClick={() => this.upVideo(record)}>下架</span>
                : <span className="bule" style={{ marginRight: '15px' }} onClick={() => this.upVideo(record)}>上架</span>
            } */}
            <Dropdown overlay={(
              (
                <Menu>

                  <Menu.Item key="0" onClick={() => { this.edit(record) }} disabled={record.module_name ? true : false }>
                    编辑
                    </Menu.Item>

                  <Menu.Item key="3" disabled={record.status === 0 ? false : true} onClick={() => this.submitAduit(record)}>
                    提交审核
                  </Menu.Item>

                  <Menu.Item key="1" disabled={record.status === 1 ? false : true} onClick={() => this.auditVideoFun(record)}>
                    审核通过
                          </Menu.Item>


                  <Menu.Item key="2" disabled={record.status === 1 ? false : true} onClick={() => this.auditVideoBack(record)}>
                    审核退回
                          </Menu.Item>

                  {/* <Menu.Item key="4" onClick={() => this.copyVideoList(record)}>
                    复制
                          </Menu.Item> */}
                  <Menu.Item key="5" disabled={record.status === 2 ? false : true} onClick={() => {

                    this.props.dispatch({
                      type: 'comment/showModal',
                      payload: {
                        information_ids: record.information_ids,
                      }
                    })
                  }}>
                    评论
                            </Menu.Item>
                  <Menu.Item key="6" onClick={record.top === 0 ? () => this.upToTop(record) : () => { this.downTop(record) }}>
                    {record.top === 1 ? '取消置顶' : '置顶'}
                  </Menu.Item>
                  <Menu.Item key="7" onClick={() => this.delete(record)}>
                    {/* <Popconfirm title="确定删除？" onConfirm={()=>this.delete(record)} okText="确定" cancelText="取消"> */}
                    删除
                            {/* </Popconfirm> */}
                  </Menu.Item>
                </Menu>
              )
            )}>
              <span className="ant-dropdown-link bule" >
                更多<Icon type="down" />
              </span>
            </Dropdown>
          </div>
        )
      }
    }];
    return (
      <div>
        <VideoButton themeId={themeId} />
        <Table
          columns={columns}
          dataSource={videoData}
          components={this.components}
          rowSelection={rowSelection}
          onRow={(record, index) => ({
            index,
            moveRow: (dragIndex, hoverIndex) => this.moveRow(dragIndex, hoverIndex, record),
          })}
          style={{ marginTop: '10px' }}
          pagination={{
            total: total, //数据总数量
            size: 'small',
            showQuickJumper: true,
            pageSize: 10,  //显示几条一页
            defaultPageSize: 10, //默认显示几条一页
            // showSizeChanger: true,  //是否显示可以设置几条一页的选项
            style: { marginRight: '50px' },
            showTotal: (total) => {  //设置显示一共几条数据
              return `共有${total}数据`
            },
            onChange: (page) => {
              let data = {
                index: page,
                page_size: 10,
                theme_id: this.props.theme.initTableName
              }
                //清除已选中的列
                this.props.dispatch({ type: 'theme/updateMoreDeal', data: [] });

              this.props.dispatch({ type: 'theme/updateIndex', data: page })
              this.props.dispatch({
                type: 'theme/getTableList', payload: {
                  dataAugment: data
                }
              })
            }
          }}
        />
        {this.state.Ylvisible ? <Modal
          title="预览"
          visible={this.state.Ylvisible}
          footer={null}
          onCancel={this.handleCancel}
          width='450px'
        >
          {this.showMoreDital(this.props.theme.informationInfo)}
        </Modal> : ''}
        <Modal
          title="资讯详情"
          visible={this.state.visible}
          footer={null}
          onCancel={this.handleCancel}
          width='648px'
        >
          <div style={{ fontSize: "18px" }}>{this.state.video_title}</div>
          <video src={this.state.videourl} controls="controls" width='600px' height='400px'></video>
        </Modal>
        <CommentModal />
      </div>
    );
  }
}
const TableList = DragDropContext(HTML5Backend)(DragSortingTable)

